<template>
  <div class="new_add_page">
    <!-- map -->
    <div id="container" tabindex="0">
      <!-- @markertap="markertap" -->
      <!-- @updated="mapUpdated" -->
      <!-- @tap="closeMapMarker" -->
      <!-- <map
        :longitude="map.longitude"
        :latitude="map.latitude"
        style="width: 100%; height: 1500rpx"
        scale="11"
        :show-location="true"
        :markers="markers"
      >
      </map> -->
      <!-- <map
        style="width: 100%; height: 100%"
        ref="addMap"
        :longitude="map.longitude"
        :latitude="map.latitude"
      ></map> -->
      <map
        style="width: 750rpx; height: 667rpx"
        :latitude="latitude"
        :longitude="longitude"
        :markers="marker"
      ></map>
    </div>
    <div class="content" :class="{ content_after: Mapshow }">
      <u-card
        :title="cardTitle"
        :sub-title="cardSubTitle"
        margin="30rpx 0rpx"
        :head-style="cardTitleClass"
        @head-click="handlerTapChooseLocation"
      >
        <view class="" slot="body"> </view>
      </u-card>
      <transition name="chooseAddByContent">
        <u-form
          class="add_form"
          :error-type="errorType"
          :model="form"
          v-if="!Mapshow"
          ref="uForm"
        >
          <u-form-item label="地区" prop="area" label-width="100rpx">
            <u-input
              v-model="form.area"
              placeholder="请输入地区,如鼓楼区"
              :placeholder-style="inputPlacehholderClass"
            ></u-input>
          </u-form-item>
          <!-- <u-form-item label="街道" prop="street" label-width="100rpx">
            <u-input
              v-model="form.street"
              placeholder="请输入街道,如福飞南路"
              :placeholder-style="inputPlacehholderClass"
            ></u-input>
          </u-form-item> -->
          <u-form-item label="门牌号" prop="detailAddress" label-width="100rpx">
            <u-input
              v-model="form.detailAddress"
              placeholder="请输入详细地址,如1号1层101"
              :placeholder-style="inputPlacehholderClass"
            ></u-input>
          </u-form-item>

          <view class="name_and_sex">
            <u-form-item
              label="联系人"
              class="name"
              prop="name"
              label-width="100rpx"
            >
              <u-input
                v-model="form.name"
                placeholder="请填写收货人的姓名"
                :placeholder-style="inputPlacehholderClass"
              />
            </u-form-item>
            <!--  还可以用right  -->
            <!-- <u-form-item label="" class="sex" prop="sex">
              <u-radio-group v-model="form.sex" size="30rpx">
                <u-radio name="max">先生</u-radio>
                <u-radio name="woman">女士</u-radio>
              </u-radio-group>
            </u-form-item> -->
          </view>

          <u-form-item label="手机号" prop="phone" label-width="100rpx">
            <u-input
              type="number"
              v-model="form.phone"
              :placeholder-style="inputPlacehholderClass"
          /></u-form-item>
          <!--  button    -->
          <view class="btn">
            <button class="submit" type="primary" @tap="submit">
              {{ btnText }}
            </button>
          </view>
        </u-form>
      </transition>
    </div>
    <u-modal
      v-model="modalShow"
      :content="content"
      @confirm="confirm"
      show-cancel-button
    ></u-modal>
    <u-toast ref="tips"></u-toast>
  </div>
</template>

<script>
// import maps from "../../static/maps";
import { mapState, mapMutations } from "vuex";
import { test, chooseLocation, openSetting } from "../../common/mapUtil";

export default {
  name: "",
  data() {
    return {
      // ...mapState([addressList]),
      modalShow: false,
      content: "确定删除这个地址?",
      cardTitle: "地图选点",
      cardSubTitle: "地图选点",
      cardTitleClass: {},
      inputPlacehholderClass: "font-size:16rpx",
      addId: 0,
      // 表单信息
      form: {
        name: "",
        // sex: "",
        phone: "",
        area: "",
        street: "",
        detailAddress: "",
        address: "",
      },
      // 验证
      rules: {
        name: [
          {
            required: true,
            message: "请输入正确的姓名",
            // max: 5,
            trigger: "blur",
          },
        ],
        // sex: [{ required: true, message: "", trigger: "blur" }],
        phone: [
          { required: true, message: "", min: 8, max: 11, trigger: "blur" },
        ],
        area: [{ required: true, message: "", trigger: "blur" }],
        street: [{ required: true, message: "", trigger: "blur" }],
        detailAddress: [{ required: true, message: "", trigger: "blur" }],
        address: [],
      },
      btnText: "保存地址",
      errorType: ["border-bottom"],
      Mapshow: false,
      switchVal: false,
      mapKey: "1ddcd60a1c4cc43344eed4e376975683",

      map: {
        // longitude: 26.061451695,
        // latitude: 119.291711487,
        longitude: 40.013305,
        latitude: 118.685713,
      },
      longitude: 119.1374156617871,
      latitude: 26.14822881950805,
      // markers:{
      //   position:new AMap.LngLat(26.061451695, 119.291711487),
      //   title:"宝龙"
      // },
      // markers: [26.061451695, 119.291711487],
      marker: [
        {
          longitude: "",
          latitude: "",
          name: "",
        },
      ],
    };
  },

  onLoad(option) {
    const that = this;

    if (option.addId) {
      that.initEdit(option);
    } else {
      that.initNew(option);
    }

    // window.init = function () {
    console.log("window init.");
    // var map = new AMap.Map("container", {
    //   // center: [117.000923, 36.675807],
    //   center: [26.061451695, 119.291711487],
    //   zoom: 11,
    // });
    // console.log(map);
    this.setMapLocation();
  },

  onNavigationBarButtonTap(e) {
    console.log("删除地址");
    this.modalShow = true;
  },

  onReady() {
    // 挂载验证
    this.$refs.uForm.setRules(this.rules);
  },

  onShow() {},
  components: {},
  computed: {
    contentClass() {
      return this.Mapshow ? "content_after" : "content_bofore";
    },
  },
  methods: {
    ...mapMutations(["SET_USER_ADDRESS"]),
    initNew(option) {},
    initEdit(option) {
      let that = this;
      that.addId = parseInt(option.addId);
      that.$store.addressEditId = parseInt(option.addId);
      console.log("store:" + that.$store.addressEditId);
      uni.setNavigationBarTitle({
        title: "编辑地址",
      });
      let _addressList = that.$store.state.addressList;
      let _addressCurrent = _addressList.filter(
        (item) => item.id == that.addId
      );

      // _addressCurrent 可以渲染出数据了

      let _detailAddressList = _addressCurrent[0].detailAddress.split(";");

      that.form = Object.assign({}, _addressCurrent[0], {
        area: _detailAddressList[0],
        street: _detailAddressList[1],
        detailAddress: _detailAddressList[2],
      });

      console.log("_addressCurrent:" + JSON.stringify(_addressCurrent[0]));
    },

    setMapLocation() {
      let that = this;
      // that.refs.addMap.longitude
      // that.refs.addMap.latitude
      console.log("sett");
      uni.getLocation({
        type: "wgs84",
        geocode: false,
        success: function (res) {
          console.log(res.longitude);
        },
        fail: function (res) {
          console.log(res);
        },
      });
    },
    handlerTapChooseLocation() {
      // console.log("choose");
      let that = this;
      this.Mapshow = !this.Mapshow;
      let latitude;
      let longitude;
      uni.chooseLocation({
        success: function (res) {
          console.log("位置名称：" + res.name);
          console.log("详细地址：" + res.address);
          console.log("纬度：" + res.latitude);
          console.log("经度：" + res.longitude);
          latitude = res.latitude; //纬度
          longitude = res.longitude; //经度
          // 设置表格数据
          that.$set(that.form, "area", res.address);
          that.$set(that.form, "detailAddress", res.name);
          // 设置背景地图显示
          that.latitude = latitude;
          that.longitude = longitude;
          // that.$refs.addMap.longitude = latitude;
          // that.$refs.addMap.latitude = latitude;
          that.marker = [
            Object.assign({}, that.marker, {
              latitude: latitude,
              longitude: longitude,
              title: res.name,
            }),
          ];
        },
      });
      that.Mapshow = false;
    },
    handlerTapSaveAdd() {
      this.submit();
    },

    submit() {
      let that = this;
      let flag;
      that.$refs.uForm.validate((valid) => {
        if (valid) {
          console.log("验证通过");
          flag = true;
        } else {
          flag = false;
        }
      });
      if (flag) {
        if (that.addId) {
          that.sendUserEditAddresss();
        } else {
          that.sendUserNewAddress();
        }
      } else {
        console.log("321");
      }
    },

    sendUserEditAddresss() {
      // 修改
      console.log("执行修改");
      let params = this.createData();
      console.log("params" + JSON.stringify(params));
      this.$u.api.editUserAddress(params).then((res) => {
        if (res.code == 0) {
          uni.navigateBack();
        }
      });
    },

    sendUserNewAddress() {
      console.log("执行修改");
      let params = this.createData();
      console.log("params" + JSON.stringify(params));
      this.$u.api.addUserAddress(params).then((res) => {
        if (res.code == 0) {
          uni.navigateBack();
        }
      });
    },

    createData() {
      let _address = `${this.form.area};${this.form.street};${this.form.detailAddress}`;
      // this.form.address = _address;
      this.$set(this.form, "address", _address);
      let data = {
        detailAddress: this.form.address,
        name: this.form.name,
        phone: this.form.phone,
      };
      return data;
    },

    submitSuccessCallBack() {},
    submitFailCallBack() {},

    confirm() {
      // 确认删除

      this.$refs.tips.show({
        title: "成功删除.",
        type: "success",
      });

      this.$u.api.deteleUserAddress().then((res) => {
        console.log(res.code);
        if (res.code == 0) {
          this.$refs.tips.show({
            title: "成功删除.",
            type: "success",
            // 绝对路径
            // url:'/pages/address/address'
          });
          uni.navigateBack();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.new_add_page {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  #container {
    width: 100%;
    height: 100%;
  }
  .content {
    width: 94%;
    box-sizing: border-box;

    margin: 0 auto;
    font-size: $uni-font-size-sm;
    z-index: 301;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.1);
    top: 30%;
    left: 50%;
    transform: translate(-50%, 0px);
    .add_form {
      background: #fff;
      width: 100%;
      height: 100%;
      .u-form-item {
        font-size: $uni-font-size-sm;
        padding: 10rpx 20rpx;
        background: #fff;
      }
      .btn {
        width: 90%;
        padding: 10prx;
        margin: 40rpx auto 100px auto;
        .submit {
          margin: 0 auto;
        }
      }
    }
    .name_and_sex {
      display: flex;
      .name {
        width: 60%;
      }
      .sex {
        width: 50%;
        display: flex;
        font-size: $uni-font-size-mm;
      }
    }
    .chooseAddByContent-enter-active {
      transition: all 0.3s ease;
    }
    .chooseAddByContent-leave-active {
      transition: translate 1s;
    }
    .chooseAddByContent-enter-to {
      //   top: 30%;
      //   transform: translateX(-10px);
    }
    .chooseAddByContent-enter,
    .chooseAddByContent-leave-to {
      transform: translateY(100px);
      opacity: 0;
    }
  }

  .content_before {
    top: 30%;
  }

  // 直接控制
  // 没有动画效果
  .content_after {
    top: 80%;
  }
}

.my_page {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
</style>
